<!--  -->
<template>
  <Layout>
    <Header class="my-header">
      <my-header></my-header>
    </Header>
    <Layout class="main">
      <div>
        <div class="my-main">
          <my-article-content></my-article-content>
        </div>
        <div class="my-widget">
          <my-widget></my-widget>
        </div>
      </div>
    </Layout>
    <BackTop></BackTop>
  </Layout>
</template>
<script>
import MyHeader from '../common/header'
import MyWidget from '../common/widget'
import MyArticleContent from './articleContent'
export default {
  components: {
    MyHeader,
    MyWidget,
    MyArticleContent
  }
}
</script>
<style scoped>
.my-header {
  position: fixed;
  width: 100%;
  z-index: 2;
}

.main {
  margin-top: 70px;
  margin-left: 50px;
  margin-right: 50px;
}

.my-main {
  width: 75%;
  float: left;
}

.my-widget {
  width: 25%;
  height: 1200px;
  float: right;
}

.my-widget div {
  margin: 10px;
}
</style>
